import React, { Component } from "react";
import {
	StyleSheet,
	View,
	Image,
	Text,
	TouchableOpacity
} from "react-native";

export class headerBar extends Component {
	constructor(props) {
		super(props);
		this._back = this._back.bind(this);
		this._share = this._share.bind(this);
	}
	_back(){
		console.log("-----------back---------");
	}
	_share(){
		console.log("-----------share----------");
	}
	render(){
		return(
			<View style={styles.container}>
				<TouchableOpacity style={styles.btn} onPress={this._back}>
					<Image style={styles.arrow_icon} source={require("./icon/left_arrow_icon.png")} />
				</TouchableOpacity>
				<Text style={styles.header_title}>宝宝血型</Text>
				<TouchableOpacity style={styles.btn} onPress={this._share}>
					<Image style={styles.share_icon} source={require("./icon/share_icon.png")} />
				</TouchableOpacity>
			</View>
		)
	}
};
const styles = StyleSheet.create({
	container:{
		width: "100%",
		height: 65,
		backgroundColor: "#f56691",
		paddingTop: 17,
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center"
	},
	arrow_icon:{
		width: 21,
		height: 12
	},
	share_icon:{
		width: 21,
		height: 21
	},
	btn: {
		width: 56,
		height: 48,
		justifyContent: "center",
		alignItems: "center"
	},
	header_title: {
		fontSize: 18,
		color: "#ffffff"
	}
});

module.exports = headerBar;